<script setup lang="ts">
import {listShops} from "../network/api.ts";
import {reactive, ref} from "vue";
import Footer from "../components/BusinessFooter.vue";
import BusinessFooter from "../components/BusinessFooter.vue";
import CustommerFooter from "../components/CustommerFooter.vue";
import router from "../Router";

let username = ref()
let shopArr = ref();

username.value = sessionStorage.getItem("username")
function getShop(){
  listShops().then(res=>{
    shopArr.value = res.data
    console.log(shopArr.value)
  })
}
listShops().then(res=>{
  shopArr.value = res.data
  console.log(shopArr.value)
})
function toBrowseShopItemPage(index,row){
  router.push({
    path:"/customer/browseShopItem",
    query:{
      shopId:shopArr.value[index].id,
      shopName:row.shopName
    }
  })
}

</script>

<template>

  <header class="title flex justify-center items-center bg-orange-3 border-orange-600 ">
    <div class="text-white select-none flex justify-center items-center gap-5">
      <p class="text-5vw">{{username}} 来</p>
      <h1>Browse shops</h1>
    </div>
  </header>

  <el-scrollbar class="mt-3vw w-full">
    <el-table :data="shopArr" height="560" style="width:100%"
    >
      <el-table-column type="index" width="22"/>
      <el-table-column  prop="shopName" label="门店名称" width="100" align="center"/>
      <el-table-column prop="createTime" label="创建时间" width="170" align="center"/>
      <el-table-column label="操作"  width="100" align="center">
        <template #default="scope">
          <el-button type="warning" color="#fdba74"
                     @click="toBrowseShopItemPage(scope.$index, scope.row)"
          >
            <div class="text-white">进入</div>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-scrollbar>

  <custommer-footer></custommer-footer>


</template>

<style scoped>

</style>